<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'
import { Message } from '@arco-design/web-vue'

const $route = useRoute()
const $router = useRouter()

const listData = ref([])
const listLoading = ref(false)
const formVisible = ref(false)
const formData = ref({
  id: null,
  title: '',
  path: '',
  icon: 'menu',
  component: '',
  parent_id: '',
  // is_menu: 1,
})

const resetFormData = async () => {
  formData.value = {
    id: null,
    title: '',
    path: '',
    icon: 'menu',
    component: '',
    parent_id: '',
    // is_menu: 1,
  }
}

const getListData = async () => {
  listLoading.value = true
  try {
    const res = await api.get('system/MenuPermissionList')
    console.log('res',res)
    listData.value = res.data
    // listTotal.value = res.data.pageInfo.total
  } catch (error) {
    console.error(error)
  }
  listLoading.value = false
}

const showModifyForm = async (record) => {
  console.log('record',record)
  resetFormData()
  if (record) {
    formData.value.id = record.id
    formData.value.title = record.meta.title
    formData.value.path = record.path
    formData.value.icon = record.meta.icon
    formData.value.component = record.component || ''
    formData.value.parent_id = record.parent_id || ''
  }
  formVisible.value = true
}

const deleteData = async (record) => {
  try {
    const res = await api.get('system/delPermission', {
      params: {
        id: record.id
      }
    })
    console.log('res',res)
    Message.success({
      content: res.message,
    })
    getListData()
  } catch (error) {
    console.error(error)
  }
}

const formSubmit = async () => {
  console.warn('formData',formData.value)
  var obj = {...formData.value}
  if (!obj.title) {
    Message.error('标题不可为空')
    return false
  }
  obj.parent_id = obj.parent_id || 0
  try {
    const res = obj.id ? await api.post('system/updateMenuPermission', obj) : await api.post('system/createMenuPermission', obj)
    console.log('res',res)
    Message.success({
      content: res.message,
    })
    resetFormData()
    getListData()
  } catch (error) {
    console.error(error)
  }
}

getListData()
</script>

<template>
  <div class="page">
    <div class="header">
      <a-button @click="showModifyForm()" type="primary">新增菜单</a-button>
    </div>

    <a-table :data="listData" show-empty-tree>
      <template #columns>
        <a-table-column title="菜单名称"
                        data-index="meta.title"></a-table-column>
        <a-table-column title="图标">
          <template #cell="{ record }">
            <icon :name="record.meta.icon"></icon>
          </template>
        </a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-popconfirm @ok="deleteData(record)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button type="primary"
                          status="danger"
                          size="mini">删除</a-button>
              </a-popconfirm>
              <a-button @click="showModifyForm(record)" type="primary"
                        size="mini">编辑</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal
      :title="formData.id?'编辑菜单':'新增菜单'"
      width="600px"
      :on-before-ok="formSubmit"
      v-model:visible="formVisible"
    >
      <a-form :model="formData">
        <a-form-item label="菜单标题">
          <a-input :style="{width:'400px'}" v-model="formData.title" placeholder="请输入菜单标题" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="菜单路由">
          <a-input :style="{width:'400px'}" v-model="formData.path" placeholder="请输入菜单路由" allow-clear></a-input>
        </a-form-item>
        <!-- <a-form-item label="菜单图标">
          <a-input :style="{width:'400px'}" v-model="formData.icon" placeholder="请输入菜单图标" allow-clear></a-input>
        </a-form-item> -->
        <a-form-item label="文件地址">
          <a-input :style="{width:'400px'}" v-model="formData.component" placeholder="请输入文件地址" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="菜单父级">
          <a-select :style="{width:'400px'}" v-model="formData.parent_id" placeholder="请选择菜单父级" allow-clear>
            <a-option v-for="(item,index) in listData" :key="index" :value="item.id">{{ item.meta.title }}</a-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="一级菜单">
          <a-radio-group v-model="">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item> -->
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>